<template>
  <!-- 猜你喜欢 -->
  <div class="mayLike">
    <h4 style="width: 100%; margin: 10px auto">猜你喜欢</h4>
    <!--         <div class="goodsBox">
          <div class="goods">
            <img src="../assets/image/may-like/goods1.jpg" alt="" />
            <div class="goodsName">HUAWEI Mate 50 RS 保时捷设计</div>
            <div class="goodsPrice">￥12999</div>
            <div class="point">
              <span>赠积分</span>
            </div>
          </div>
        </div>
        <div class="goodsBox">
          <div class="goods">
            <img src="../assets/image/may-like/goods2.jpg" alt="" />
            <div class="goodsName">HUAWEI FreeBuds SE 无线耳机</div>
            <div class="goodsPrice">￥339</div>
            <div class="point">
              <span>赠积分</span>
            </div>
          </div>
        </div> -->

    <!-- 调接口的数据 -->
    <div
      class="goodsBox"
      :title="goods.name"
      :key="goods.id"
      v-for="goods in nowGoods"
      @click="toDetail(goods.id)"
    >
      <div class="goods">
        <img :src="dalImg(goods.coverImage)" alt="" />
        <div class="goodsName">{{ goods.name }}</div>
        <div class="goodsPrice">￥{{ goods.price }}</div>
        <div class="point">
          <span>赠积分</span>
        </div>
      </div>
    </div>
    <p class="noMore">没有更多数据</p>
  </div>
</template>

<script setup>
import { ref, inject, computed, provide } from "vue";
import { useRouter } from "vue-router";
import { loadMayLikeGoods } from "../services/mayLike.js";
import { dalImg } from "../utils/tools";

const allGoods = ref([]);
const page = ref(1);
const router = useRouter();

//引入关键词
const searchTxt = inject("searchTxt", "") ? inject("searchTxt", "") : ref("");
// console.log(searchTxt.value);

//发送请求获取商品

//发送请求获取商品
const loadGoods = () => {
  loadMayLikeGoods(page.value).then((res) => {
    allGoods.value.push(...res.data);
    // page.value++;
  });
};
loadGoods();

function scrollFn() {
  //获取网页的总高度
  var htmlHeight =
    document.body.scrollHeight || document.documentElement.scrollHeight;
  //clientHeight是网页在浏览器中的可视高度
  var clientHeight =
    document.body.clientHeight || document.documentElement.clientHeight;
  //scrollTop是浏览器滚动条的top位置
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  //判断到底部了
  // console.log(scrollTop + clientHeight, htmlHeight);
  if (scrollTop + clientHeight > htmlHeight - 50) {
    page.value++; // 页码+1
    loadGoods();
  }
}

// 监听滚动事件实现下拉刷新
window.onscroll = debounce(scrollFn, 200);

// ******防抖函数封装
function debounce(fn, delay) {
  let timeout;
  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

//跳转详情页
const toDetail = (id) => {
  router.push({
    name: "Detail",
    query: {
      id,
    },
  });
};

//搜索

const nowGoods = computed(() => {
  return allGoods.value.filter((item) => item.name.includes(searchTxt.value));
});
</script>

<style scoped lang="scss">
.mayLike {
  display: flex;
  flex-wrap: wrap;
  width: 94%;
  justify-content: space-between;
  margin: 10px auto;
  padding-bottom: 80px;
  // place-items: center center;
  // grid-template-columns: 50% 50%;
  .goodsBox {
    width: 48.8%;
    border-radius: 8px;
    background-color: #fff;
    margin-bottom: 10px;
    .goods {
      padding-top: 15px;
      text-align: center;
      img {
        width: 132px;
        height: 132px;
      }
      .goodsName {
        height: 36px;
        margin: 10px auto;
        line-height: 18px;
        width: 160px;
        text-align: start;
        font-size: 13px;
        font-weight: bold;
        overflow: hidden;
      }
      .goodsPrice {
        margin: 0 auto;
        width: 160px;
        text-align: start;
        font-size: 16px;
        font-weight: bold;
        color: rgb(207, 10, 44);
      }
      .point {
        margin: 9px auto 20px auto;
        width: 160px;
        text-align: start;
        font-size: 12px;
        color: rgb(207, 10, 44);
        span {
          border: 1px solid rgb(206, 110, 126);
          border-radius: 3px;
        }
      }
    }
  }
  .noMore {
    // text-align: center;
    // margin-top: 50px;
    color: #888;
    margin: 0 auto;
  }
}
</style>
